<template>
	<view class="content-appraise">
		<view class="goods-appraise unify-background-color unify-padding">
			<!-- 评价导航 -->
			<view class="appraise-nav unify-flex">
				<view class="appraise-nav-item unify-flex" v-for="(item,index) in appraiseNavMenu" :key="index">
					<view class="iconfont el-icon-zantianchong"
						:class="[index === (appraiseNavMenu.length - 1)? 'unify-flip-vertical': '']" v-if="index > 2">
					</view>
					{{item.name}}
					<view style="margin-left: 5rpx;">{{item.value}}</view>
				</view>
			</view>
		
			<!-- 评价列表 -->
			<uni-goods-appraise></uni-goods-appraise>
			
			<!-- 加载更多 -->
			<uni-loading-more></uni-loading-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appraiseNavMenu: this.$mConstDataConfig.appraiseNavMenu, // 评价导航菜单
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-appraise {
		height: 100vh;
		background-color: $uni-bg-color;
	}
	
	// 商品评价
	.goods-appraise {
		padding-top: $uni-spacing-col-basic;
		
		// 评价导航
		.appraise-nav {
			font-size: $uni-font-size-sm;
			padding-bottom: 30rpx;
	
			.appraise-nav-item {
				padding: 6rpx 10rpx;
				background-color: rgba($color: $uni-auxiliary-colour1, $alpha: .2);
				margin-right: 20rpx;
				border-radius: 5rpx;
				align-items: center;
	
				.iconfont {
					font-size: $uni-font-size-sm;
					color: $uni-auxiliary-colour1;
				}
			}
		}
	}
</style>